Ext.namespace('Ext.ux.form');
Ext.ux.form.HtmlViewer = Ext.extend(Ext.form.TextArea, {
	isFormField : true,
	
	value : '',
	onRender : function(ct, position) {
		Ext.ux.form.HtmlViewer.superclass.onRender.call(this, ct, position);
		this.el.dom.style.border = '0 none';
        this.el.dom.setAttribute('tabIndex', -1);
        this.el.addClass('x-hidden');
        if(Ext.isIE){ // fix IE 1px bogus margin
            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
        }
        this.wrap = this.el.wrap({
            cls:'x-html-editor-wrap'
        });
        this.view = this.wrap.createChild({tag:'div',style:'overflow:auto'});
        
         if(!this.width){
            this.setSize(this.el.getSize());
        }
	},
	
	onResize : function(w, h){
        Ext.ux.form.HtmlViewer.superclass.onResize.apply(this, arguments);
        if(this.el && this.view){
            if(typeof w == 'number'){
                var aw = w - this.wrap.getFrameWidth('lr');
                this.el.setWidth(this.adjustWidth('textarea', aw));
                this.view.dom.style.width = aw + 'px';
                this.wrap.dom.style.width = aw + 'px';
            }
            if(typeof h == 'number'){
                var ah = h ;
                this.el.setHeight(this.adjustWidth('textarea', ah));
                this.view.dom.style.height = ah + 'px';
            }
        }
    },

	setValue : function(v) {
		Ext.ux.form.HtmlViewer.superclass.setValue.call(this, v);
		if (this.view){
			this.view.dom.innerHTML = v;
		}
	}

});

Ext.reg('htmlviewer', Ext.ux.form.HtmlViewer);
